<template>
    <div class="com-search">
        <div class="search-box">
            <ul class="tabs">
                <li @click="handleTabsClick(1)" class="item" :class="{active: active === 1}">职位</li>
                <li @click="handleTabsClick(2)" class="item" :class="{active: active === 2}">公司</li>
            </ul>
            <div class="form">
                <input v-model="val" type="text" class="input" placeholder="请输入">
                <span class="btn" @click="handleSearch">搜 索</span>
            </div>
            <dl class="hot-search">
                <dt class="title">热门搜索：</dt>
                <dd @click="handleHotSearch('文员')" class="item">文员</dd>
                <dd @click="handleHotSearch('会计')" class="item">会计</dd>
            </dl>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            active:1,
            val: ''
        };
    },

    methods: {
        handleTabsClick (i) {
            this.active = i;
            this.$emit('tabsClick', i);
        },
        handleSearch () {
            this.$emit('search', {val: this.val, active: this.active});
        },
        handleHotSearch (val) {
            this.$emit('search', {val: val, active: this.active});
        }
    }
};
</script>

<style lang="scss" scoped>
    .com-search {
        height: 158px;
        background: #fff;
        .search-box {
            width: 726px;
            margin: 0 auto;
            padding-top: 28px;
            box-sizing: border-box;
            
            .tabs {
                overflow: hidden;
                .item {
                    float: left;
                    height: 24px;
                    text-align: center;
                    line-height: 24px;
                    padding: 0 10px;
                    background: #F5F5F5;
                    cursor: pointer;
                    color: #333;
                    &.active {
                        background: #53CAC3;
                        color: #fff;

                    }
                }
            }

            .form {
                height: 50px;
                overflow: hidden;
                .input {
                    float: left;
                    height: 100%;
                    width: 586px;
                    text-indent: 12px;
                    border: 1px solid #E8E8E8;
                    box-sizing: border-box;
                    
                }
                .btn {
                    float: left;
                    height: 100%;
                    width: 140px;
                    font-size: 18px;
                    text-align: center;
                    line-height: 50px;
                    background: #53CAC3;
                    color: #FEFEFE;
                    cursor: pointer;
                }
            }

            .hot-search {
                margin-top: 16px;
                overflow: hidden;
                color: #999;
                font-size: 14px;
                .title, .item {
                    float: left;
                }
                .title {}
                .item { margin-left: 8px; cursor: pointer;}
            }
        }
    }
</style>